<template>
  <div class="outer-box">
    <header class="title">{{ title }}</header>
    <div class="content">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.outer-box {
  box-sizing: border-box;
  border-radius: 16px;
  background: #ffffff;
  margin-bottom: 24px;
  .title {
    padding: 0 42px;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #e2e2e2;
  }
  .content {
    padding: 40px;
  }
}
</style>
